<template>
  <div class="config-info">
    <div class="top-input" v-if="props.showTopInput">
      <span>方案名称：</span>
      <el-input v-model="state.nameHx" placeholder="请输入方案名称"></el-input>
    </div>
    <div class="content-box">
      <div class="content-left">
        <div class="left-title">区域名称</div>
        <div class="left-box">
          <div
            :class="['box-item', state.currentArea == index ? 'active' : '']"
            :key="index"
            v-for="(item, index) in state.secList"
          >
            <el-tooltip :content="item.zName" placement="top" :disabled="item.zName.length < 6">
              <span @click="handleClickArea(item, index)">{{ item.zName }}</span>
            </el-tooltip>
            <span>
              <el-icon @click.stop="handlePosition(item)">
                <Position />
              </el-icon>
              <!-- <el-icon @click="handleEditConifg">
                <EditPen />
              </el-icon>-->
            </span>
          </div>
          <!-- <div class="box-btn" @click="handleChangeArea()">区域调整</div> -->
        </div>
      </div>
      <div class="content-left">
        <div class="left-title">控制断面名称</div>
        <div class="left-box">
          <!-- <div
            :class="['box-item', state.currentSec == index ? 'active' : '']"
            :key="index"
            v-for="(item, index) in state.secArr"
          >
            <el-tooltip :content="item.blknm" placement="top" :disabled="item.blknm.length < 6">
              <span @click="handleClickSec(item, index)">{{ item.blknm }}</span>
            </el-tooltip>
            <span>
              <el-icon @click.stop="handlePositionSec(item)">
                <Position />
              </el-icon>
            </span>
          </div> -->
          <el-collapse v-model="state.collapseActive" accordion @change="handleSwitchCollapse">
            <el-collapse-item name="1">
              <template #title>
                <span class="mg10">水库/闸/坝</span>
              </template>
              <div class="tabs-list">
                <div
                  :class="['list-item', state.currentSec === index ? 'active' : '']"
                  v-for="(item, index) in state.secArr.filter(
                    (v) => v.sttp == 'RR' || v.sttp == 'DD' || v.sttp == 'DM'
                  )"
                  :key="index"
                  @click="handleClickSec(item, index)"
                >
                  <el-tooltip
                    :content="item.blknm"
                    placement="top"
                    :disabled="item.blknm.length < 6"
                  >
                    <span>{{ item.blknm }}</span>
                  </el-tooltip>
                  <span>
                    <el-icon @click.stop="handlePositionSec(item)">
                      <Position />
                    </el-icon>
                  </span>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template #title>
                <span class="mg10">水文/水位</span>
              </template>
              <div class="tabs-list">
                <div
                  :class="['list-item', state.currentSec === index ? 'active' : '']"
                  v-for="(item, index) in state.secArr.filter(
                    (v) => v.sttp == 'ZQ' || v.sttp == 'ZZ'
                  )"
                  :key="index"
                  @click="handleClickSec(item, index)"
                >
                  <el-tooltip
                    :content="item.blknm"
                    placement="top"
                    :disabled="item.blknm.length < 6"
                  >
                    <span>{{ item.blknm }}</span>
                  </el-tooltip>
                  <span>
                    <el-icon @click.stop="handlePositionSec(item)">
                      <Position />
                    </el-icon>
                  </span>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="content-right">
        <div class="right-title">
          <span>
            河系计算方案设置区-
            <span class="name">{{ state.secName }}</span>
          </span>
          <div class="select-box">
            <span>区域方案:</span>
            <el-select
              v-model="state.zoneSchemesParams.zscid"
              class="m-2"
              placeholder="请选择"
              @change="handleChangeAreaScheme"
            >
              <el-option
                v-for="item in state.zoneSchemeArr"
                :key="item.id"
                :label="item.scName"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div class="right-box">
          <el-tabs type="border-card" @tab-click="handleTabsClcik">
            <el-tab-pane label="洪水预报">
              <div class="flood-form">
                <div class="form-item">
                  <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>
                  <span>
                    <el-select
                      v-model="state.formName.chlMid"
                      class="m-2"
                      :disabled="!state.editFlag"
                      placeholder="请选择"
                      @change="handleChangeWaterFlood"
                    >
                      <el-option
                        v-for="item in state.waterflood"
                        :key="item.id"
                        :label="item.modelName"
                        :value="item.id"
                      />
                    </el-select>
                  </span>
                </div>
                <div class="form-item">
                  <span class="name">模型参数方案:</span>
                  <span>{{ state.floodParams || '--' }}</span>
                  <span class="btn-color" @click="handleSearchParams">查看方案参数</span>
                </div>
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="河道演进">
              <div class="flood-form">
                <div class="form-item">
                  <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>

                  <span>
                    <el-select v-model="state.formName.evolMid" class="m-2" :disabled="!state.editFlag"
                      placeholder="请选择" @change="handleChangeRiverInfo">
                      <el-option v-for="item in state.riverInfo" :key="item.id" :label="item.modelName"
                        :value="item.id" />
                    </el-select>
                  </span>
                </div>
                <div class="form-item">
                  <span class="name">模型参数方案:</span>
                  <span> {{state.riverParams ||'--'}}</span>
                  <span class="btn-color">查看方案参数</span>
                </div>

              </div>
            </el-tab-pane>-->
            <!-- <el-tab-pane label="水工程">
              <div class="flood-form">
                <div class="form-item">
                  <span class="name">工&nbsp;&nbsp;程&nbsp;&nbsp;类&nbsp;型&nbsp;:</span>
                  <span>水库</span>
                </div>
                <div class="form-item">
                  <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>
                  <span>
                    <el-select
                      v-model="state.formName.resvMid"
                      class="m-2"
                      :disabled="!state.editFlag"
                      placeholder="请选择"
                      @change="handleChangeReservoir"
                    >
                      <el-option
                        v-for="item in state.reservoir"
                        :key="item.id"
                        :label="item.modelName"
                        :value="item.id"
                      />
                    </el-select>
                  </span>
                </div>
                <div class="form-item">
                  <span class="name">模型参数方案:</span>
                  <span>{{state.reservoirParams ||'--'}}</span>
                  <span class="btn-color">查看方案参数</span>
                </div>
              </div>
            </el-tab-pane>-->
          </el-tabs>
        </div>
        <!-- <div class="footer-btn">
          <el-button v-if="props.showTopInput" type="primary" @click="handleSaveScheme"
            >保存方案</el-button
          >
        </div> -->
      </div>
    </div>
    <!-- 弹窗 -->
    <ConfigParagm
      :dialogVisible="showDialog"
      @closeDialog="closeDig"
      :paramsDetail="paramsDetail"
    />
    <!-- 时空变源参数 -->
    <paramsSkby ref="paramsSkbyRef" />
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import emitter from '@/utils/bus'
import ConfigParagm from './cpns/configParagm.vue'
import RiverModal from '@/pages/ComputeMethods/cpns/riverModal/index.vue'
import { getXajParamsDetail } from '@/services/modules/model-config'

import {
  getZoneList,
  getZoneSchemes,
  getAreaSecList,
  getAreaSchemeConfig,
  getModel,
  getPmSchemes,
  getSchemeList,
  getZoneSchemesList
} from '@/services/modules/compute-methods'
import { ElMessage } from 'element-plus'
const paramsSkbyRef = ref(null)
const state = reactive({
  floodParamsList: [],
  collapseActive: '1',
  secBlkcd: '',
  schemeSecArr: [],
  secName: '',
  currentSec: 0,
  currentArea: 0,
  secList: [],
  zoneSchemeArr: [],
  secArr: [],
  riverObj: {},
  waterflood: [],
  riverInfo: [],
  reservoir: [],
  areaConfig: {
    paramConf: []
  },
  paramConfArr: [],
  zoneSchemesParams: {
    zid: '',
    zscid: ''
  },
  formName: {
    chlMid: '',
    evolMid: '',
    resvMid: '',
    chlScid: '',
    evolScid: '',
    resvScid: '',
    blkcd: ''
  },
  waterfloodParams: {
    modelType: '',
    mid: '',
    blkcd: ''
  },
  riverInfoParams: {
    modelType: '',
    mid: '',
    blkcd: ''
  },
  reservoirParams: '',
  // 河系方案名称
  nameHx: ''
})
const props = defineProps({
  schemeId: {
    type: Number,
    default: 0
  },
  zId: {
    type: Number,
    default: 0
  },
  planName: {
    type: String,
    default: ''
  },
  // 当新建和编辑时展示上方的input框 展示保存方案按钮
  showTopInput: {
    type: Boolean,
    default: false
  }
})
watch(
  () => props.zId,
  async () => {
    await getSecList(props.zId)
    if (state.secList.length) {
      // 默认选中第一个区域
      handleClickArea(state.secList[0], 0)
    }
    //  await getZoneSchemesLists(props.zId)
  },
  { immediate: true, deep: true }
)
watch(
  () => {
    props.schemeId
  },
  () => {
    // 如果有id则显示河系方案名称
    if (props.schemeId) {
      state.nameHx = props.planName
    } else {
      state.nameHx = ''
    }
    if (state.secList.length && props.schemeId) {
      // 默认选中第一个区域
      handleClickArea(state.secList[0], 0)
    }
  },
  {
    immediate: true,
    deep: true
  }
)
const options = [
  {
    value: '区域方案1',
    label: '区域方案1'
  },
  {
    value: '区域方案2',
    label: '区域方案2'
  },
  {
    value: '区域方案3',
    label: '区域方案3'
  }
]
emitter.on('clickArea', (value) => {
  if (value) {
    state.riverObj = value
  }
})
const emit = defineEmits(['handleSaveScheme'])
function handleSwitchCollapse(val) {
  state.currentSec = 0
  if (val == 1) {
    handleClickSec(state.secArr.filter((v) => v.sttp == 'RR')[0], 0)
  } else {
    handleClickSec(state.secArr.filter((v) => v.sttp == 'ZQ')[0], 0)
  }
}
// //编辑预报断面
// function handleEditConifg(){
//   state.editFlag = true
// }
//查看参数详情
let paramsDetail = ref({})
let showDialog = ref(false)
//定位区域
function handlePosition(item) {
  emitter.emit('positionArea', item)
}
function handleSearchParams() {
  if (state.formName.chlMid == 1) {
    paramsSkbyRef.value.handleOpenParams(undefined, state.secBlkcd, {
      paramsName: state.floodParams,
      paramsId: state.formName.pmid
    })
  } else if (state.formName.chlMid == 2) {
    getXajParamsDetail({
      scid: state.formName.chlScid
    }).then((res) => {
      if (res.code === 200) {
        paramsDetail.value = res.data
        if (res.data) {
          showDialog.value = true
          console.log('66', showDialog)
        }
      }
    })
  }
}
const closeDig = (v) => {
  showDialog.value = v
}
//修改预报模型
function handleChangeWaterFlood(item) {
  let arr = state.waterflood.filter((e) => {
    return e.id == item
  })
  state.waterfloodParams = {
    modelType: arr[0].id,
    mid: arr[0].id,
    blkcd: state.secBlkcd,
    zid: state.zoneSchemesParams.zid
  }
  // console.log('arr',arr[0])
  getPmSchemes(state.waterfloodParams).then((res) => {
    if (res.code === 200 && res.data?.length) {
      state.floodParamsList = res.data
      let storeInfo = res.data.filter((e) => {
          return e.id == state.formName.chlScid
        })
      let a = state.schemeSecArr.filter((e) => {
        return e.blkcd == state.secBlkcd
      })
      state.floodParams = state.floodParamsList.filter((e) => {
        return e.id == a[0].chlScid
      })[0].name
      state.formName.pmid = storeInfo[0].pmid
      // state.floodParams = res.data[0].name
      state.formName.chlScid = res.data[0].id
    } else {
      state.floodParams = ''
    }
  })
}
//定位 sec
function handlePositionSec(item) {
  emitter.emit('fixedPosition', item)
}
//修改河道演进
function handleChangeRiverInfo(item) {
  let arr = state.riverInfo.filter((e) => {
    return e.id == item
  })
  state.riverInfoParams = {
    modelType: arr[0].specialId,
    mid: arr[0].id,
    blkcd: state.secBlkcd
  }
  // console.log('arr',arr[0])
  getPmSchemes(state.riverInfoParams).then((res) => {
    if (res.code === 200 && res.data?.length) {
      state.riverParams = res.data[0].name
      state.formName.evolScid = res.data[0].id
    } else {
      state.riverParams = ''
    }
  })
}
//修改水库
function handleChangeReservoir(item) {
  let arr = state.reservoir.filter((e) => {
    return e.id == item
  })
  // console.log('arr',arr[0])
  getPmSchemes({
    modelType: arr[0].specialId,
    mid: arr[0].id,
    blkcd: state.secBlkcd
  }).then((res) => {
    if (res.code === 200 && res.data?.length) {
      state.reservoirParams = res.data[0].name
      state.formName.resvScid = res.data[0].id
    }
  })
}
function getAreaSchemeConfigList(schemeId) {
  if (schemeId) {
    return new Promise((resolve, reject) => {
      getAreaSchemeConfig({ scid: schemeId }).then((res) => {
        if (res.code === 200) {
          state.schemeSecArr = res.data.paramConf
          resolve(state.schemeSecArr)
        }
      })
    })
  }
}
//保存方案
function handleSaveScheme() {
  emit('handleSaveScheme', state.zoneSchemesParams, state.nameHx)
  console.log('666', state.zoneSchemesParams)
}
//下拉区域方案
function handleChangeAreaScheme(value) {
  getAreaSchemeConfigList(value)
}
//区域调整
function handleChangeArea() {
  console.log('123', state.riverObj)
  emitter.emit('riverModel', state.riverObj)
}
//点击区域
async function handleClickArea(item, index) {
  state.currentArea = index
  state.zoneSchemesParams.zid = item.zid
  state.zoneSchemesParams.zscid = ''
  state.zoneSchemeArr = []
  await getSchemeList({ zid: item.zid }).then((res) => {
    if (res.code === 200) {
      state.zoneSchemeArr = res.data
    }
  })
  await getZoneSchemesList({ rscid: props.schemeId, rsid: props.zId }).then((res) => {
    if (res.code === 200) {
      res.data.forEach((child) => {
        if (item.zid == child.zid) {
          state.zoneSchemesParams.zscid = child.zscid
        }
      })
    }
  })

  await getAreaSecList({ zid: item.zid }).then((res) => {
    if (res.code === 200) {
      // 获取控制断面
      state.secArr = res.data
      if (state.secArr.length) {
        emitter.emit('mapArea', state.secArr)
        handleClickSec(state.secArr.filter((v) => v.sttp == 'RR')[0], 0)
      }
    }
  })
}
//
async function handleClickSec(item, index) {
  console.log('66', state.zoneSchemeArr)
  state.editFlag = false
  state.formName = {
    chlMid: '',
    evolMid: '',
    resvMid: '',
    chlScid: '',
    evolScid: '',
    resvScid: '',
    blkcd: ''
  }
  state.secBlkcd = item.blkcd
  // if (state.zoneSchemeArr.length > 0) state.zoneSchemesParams.zscid = state.zoneSchemeArr[0].id
  await getAreaSchemeConfigList(state.zoneSchemesParams.zscid)
  if (state.schemeSecArr.length > 0) {
    let a = state.schemeSecArr.filter((e) => {
      return e.blkcd == item.blkcd
    })
    if (a.length > 0) {
      state.formName = a[0]

      state.formName.id = undefined
      state.formName.scid = undefined
      if (!state.formName.resvMid) {
        state.formName.resvMid = '请选择'
      }
    }

    state.formName.blkcd = item.blkcd
    let flag = state.paramConfArr.filter((child) => {
      return child.blkcd == item.blkcd
    })
    if (flag.length == 0) {
      state.paramConfArr.push(state.formName)
    }
    handleChangeWaterFlood(state.formName.chlMid)
  } else {
    ElMessage.warning('请先选择区域方案')
    return false
  }
  state.currentSec = index
  state.secName = item.blknm
  //  emitter.emit('fixedPosition', item)
  //    emitter.emit('fixedSec',item.blkcd)
}
//获取河系区域方案
function getZoneSchemesLists(id) {
  return new Promise((resolve, reject) => {
    getZoneSchemes({ rsid: id }).then((res) => {
      if (res.code === 200) {
        state.zoneSchemeArr = res.data
        resolve(state.zoneSchemeArr)
      }
    })
  })
}
//获取河系区域
function getSecList(id) {
  return new Promise((resolve, reject) => {
    getZoneList({ rsid: id }).then((res) => {
      if (res.code === 200) {
        state.secList = res.data
        resolve(state.secList)
      }
    })
  })
}
//获取模型数据
function getModelList(val) {
  getModel({ specialId: val }).then((res) => {
    if (res.code === 200) {
      switch (val) {
        case 1:
          return (state.waterflood = res.data)
        case 2:
          return (state.riverInfo = res.data)
        case 3:
          return (state.reservoir = res.data)

        default:
          break
      }
    }
  })
}
onMounted(() => {
  getModelList(1)
  getModelList(2)
  getModelList(3)
})
</script>

<style lang="less" scoped>
.config-info {
  width: 100%;
  height: 100%;
  .top-input {
    display: flex;
    align-items: center;
    width: 4.375rem;
    margin-bottom: 0.25rem;
    span {
      width: auto;
      white-space: nowrap;
    }
  }
  .content-box {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .content-left {
      width: 1.875rem;
      height: calc(100% - 0.1rem);
      margin: 0 0.0625rem;
      border: 0.0125rem solid #c8c2c29d;
      .left-title {
        font-size: 0.175rem !important;
        height: 0.5rem;
        background: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
      }
      .left-box {
        height: calc(100% - 0.5rem);
        overflow-y: auto;
        .mg10 {
          width: 100%;
          text-align: center;
          margin-left: 0.125rem;
        }
        :deep(.el-collapse-item__wrap) {
          border: none;
        }
        :deep(.el-collapse-item__header) {
          padding-left: 0.125rem;
        }
        .box-item,
        .list-item {
          font-size: 0.175rem;
          padding-left: 0.0625rem;
          height: 0.375rem;
          color: gray;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span:nth-of-type(1) {
            width: 100%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &.active {
            span:nth-of-type(1) {
              cursor: pointer;
              color: #409eff;
            }
          }
          &:hover {
            span:nth-of-type(1) {
              cursor: pointer;

              color: #409eff;
            }
          }
          span:nth-of-type(2) {
            color: #409eff;
            margin-right: 0.125rem;
          }
        }
        .box-btn {
          width: 100%;
          height: 0.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #409eff;
          color: #fff;
          cursor: pointer;
        }
      }
    }
    .content-right {
      width: calc(100% - 3.875rem);
      height: 100%;
      padding-left: 0.125rem;
      .right-title {
        font-size: 0.175rem;
        margin-bottom: 0.125rem;
        display: flex;
        line-height: 0.375rem;
        justify-content: space-between;
        .name {
          color: #409eff;
        }
        .select-box {
          font-size: 0.175rem;
          span {
            margin-right: 0.125rem;
          }
        }
      }
      .right-box {
        width: 100%;
        height: calc(100% - 0.625rem);
        :deep(.el-tabs--border-card) {
          height: 100%;
          .el-tabs__content {
            height: calc(100% - 0.75rem);
            .el-tab-pane {
              height: 100%;
              .flood-form {
                padding: 0.1875rem;
                .form-item {
                  font-size: 0.175rem;
                  height: 0.625rem;
                  .btn-color {
                    cursor: pointer;
                    color: #409eff;
                    margin-left: 0.625rem;
                  }
                  .name {
                    color: grey;
                    margin-right: 0.25rem;
                  }
                }
              }
            }
          }
        }
      }
      // .footer-btn {
      //   text-align: right;
      //   margin-top: .125rem;
      // }
    }
  }
}
</style>
